
<div id="content">
  <div class="row crumb_row">
    <big-breadcrumbs
      items="['角色', '权限的集合，设置不同的角色并配置不同的操作权限']"
      class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
    >
    </big-breadcrumbs>
    <alert-message
      level="level"
      message="message"
      show="show"
      class="col-xs-8 col-sm-5 col-md-5 col-lg-3"
    ></alert-message>
  </div>
  <state-breadcrumbs></state-breadcrumbs>
  <section id="widget-grid" widget-grid>
    <div class="row">
      <div class="col-md-12 action_wrap">
        <button
          class="btn btn_green"
          data-toggle="modal"
          data-target="#create_modal"
          ng-show="apis.Role.createRole"
          ng-click="getResource();doFocus('roleName')"
        >
          创建
        </button>
        <button
          class="btn btn_blue"
          data-toggle="modal"
          data-target="#update_modal"
          ng-show="apis.Role.updateRole"
          ng-click="updateList();doFocus('updateRoleName')"
          ng-disabled="showRole.u"
        >
          修改
        </button>
        <button
          class="btn btn_red"
          data-toggle="modal"
          data-target="#delete_modal"
          ng-show="apis.Role.deleteRoles"
          ng-click="deleteNames()"
          ng-disabled="showRole.d"
        >
          删除
        </button>
        <div class="pull-right">
          <button class="btn btn_lightblue" ng-click="reloadData()">
            刷新
          </button>
        </div>
      </div>
      <article class="col-sm-12 col-md-12 col-lg-12 col-xs-12">
        <div class="widget-body">
          <table
            datatable
            class="table table-striped table-hover row-border hover roleTable"
            dt-options="showRole.dtOptions"
            dt-columns="showRole.dtColumns"
            dt-instance="showRole.dtInstance"
            id="roleTab"
          ></table>
        </div>
      </article>
    </div>
  </section>

  <div
    class="modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    id="create_modal"
    ng-show="toShow"
  >
    <div class="modal-dialog" id="create_dlg" style="width: 800px">
      <div class="modal-content">
        <div class="modal-header">
          <button
            type="butto1n"
            class="close"
            data-dismiss="modal"
            ng-click="createReset()"
          >
            <span aria-hidden="true">&times;</span
            ><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">创建角色</h4>
        </div>
        <div
          class="modal-body"
          style="height: 400px; overflow-y: auto; overflow-x: hidden"
        >
          <section id="widget-grid" widget-grid>
            <div class="row" style="height: 320px; padding: 5px">
              <article>
                <div
                  jarvis-widget
                  id="wid-id-2"
                  data-widget-editbutton="false"
                  data-widget-colorbutton="false"
                  data-widget-togglebutton="false"
                  data-widget-fullscreenbutton="false"
                  data-widget-deletebutton="false"
                >
                  <div style="border-color: #fff !important">
                    <div
                      class="widget-body fuelux"
                      data-smart-fuelux-wizard
                      data-smart-wizard-callback="wizardCompleteCallback"
                      style="padding-bottom: 50px; border: none"
                    >
                      <div class="wizard">
                        <ul class="steps">
                          <li data-step="1" class="active" id="title_one">
                            <span class="badge badge-info">1</span>Step 1<span
                              class="chevron"
                            ></span>
                          </li>
                          <li data-step="2">
                            <span class="badge">2</span>Step 2<span
                              class="chevron"
                            ></span>
                          </li>
                          <li data-step="3">
                            <span class="badge">3</span>Step 3<span
                              class="chevron"
                            ></span>
                          </li>
                        </ul>
                        <div class="actions">
                          <button
                            type="button"
                            class="btn btn-sm btn_lightblue btn-prev"
                          >
                            <i class="fa fa-arrow-left"></i>上一步
                          </button>
                          <button
                            type="button"
                            class="btn btn-sm btn_lightblue btn-next"
                            ng-disabled="createForm.$invalid || CreateFormDes"
                            ng-click="nextBtn()"
                            data-last="创建"
                          >
                            下一步
                            <i class="fa fa-arrow-right"></i>
                          </button>
                        </div>
                      </div>
                      <div class="step-content">
                        <div class="step-pane active step_one" data-step="1">
                          <h3><strong>Step 1 </strong> - 基本信息</h3>
                          <form
                            class="form-horizontal"
                            role="form"
                            novalidate="novalidate"
                            data-smart-validate-form
                            name="createForm"
                            id="createForm"
                          >
                            <div
                              class="form-group"
                              ng-class="{'has-error':createForm.roleName.$invalid&&createForm.roleName.$touched}"
                            >
                              <label for="role" class="col-sm-3 control-label"
                                >角色名
                                <span class="required" aria-required="true"
                                  >*
                                </span>
                              </label>
                              <div class="col-sm-6">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="roleName"
                                  name="roleName"
                                  required
                                  placeholder="角色名"
                                  ng-pattern="/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,}$/"
                                  ng-minlength="2"
                                  ng-maxlength="64"
                                  ng-model="roleName"
                                  onfocus="hideSth(this)"
                                  onblur="showSth(this)"
                                />
                                <p
                                  class="hoverTip hideTip"
                                  ng-show="!(createForm.roleName.$invalid&&!createForm.roleName.$error.maxlength&& !createForm.roleName.$pristine&&createForm.roleName.$touched)&&!(createForm.roleName.$error.maxlength&&createForm.roleName.$touched)"
                                >
                                  <i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",长度2-64
                                </p>
                                <span
                                  ng-if="roleName!==''&&createForm.roleName.$invalid&&!createForm.roleName.$error.maxlength&& !createForm.roleName.$pristine&&createForm.roleName.$touched "
                                  class="help-block"
                                  ><i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",长度2-64</span
                                >
                                <span
                                  ng-if="roleName!==''&&createForm.roleName.$error.maxlength&&createForm.roleName.$touched"
                                  class="help-block"
                                  ><i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",至多64位</span
                                >
                              </div>
                            </div>

                            <div class="form-group">
                              <label class="col-sm-3 control-label">描述</label>
                              <div class="col-sm-6">
                                <textarea
                                  type="textarea"
                                  class="form-control"
                                  placeholder="描述"
                                  id="description"
                                  name="description"
                                  ng-model="description"
                                  style="resize: none; height: 100px"
                                ></textarea>
                                <p ng-if="!CreateFormDes">
                                  <i class="fa fa-exclamation-circle"></i>
                                  输入长度最多250位字符
                                </p>
                                <p class="help-block" ng-if="CreateFormDes">
                                  <i class="fa fa-exclamation-circle"></i>
                                  输入长度最多250位字符
                                </p>
                              </div>
                            </div>
                          </form>
                        </div>

                        <div class="step-pane" data-step="2" id="lastStep">
                          <h3><strong>Step 2 </strong> - 权限分配</h3>
                          <form
                            class="smart-form"
                            role="form"
                            novalidate
                            id="step2"
                          ></form>
                        </div>
                        <div class="step-pane" data-step="3">
                          <h3><strong>Step 3 </strong> - 确认创建</h3>
                          <div class="col-md-offset-1">
                            <p style="font-size: 16px">基本信息</p>
                            <div
                              class="col-md-offset-1"
                              style="margin-bottom: 10px"
                            >
                              <div
                                class="col-md-12"
                                style="padding-left: 0px; font-size: 15px"
                                id="userNa"
                              ></div>
                              <div
                                class="col-md-12"
                                id="userDes"
                                style="
                                  padding-left: 0px;
                                  font-size: 15px;
                                  margin: 10px 0px;
                                "
                              ></div>
                            </div>
                            <p style="font-size: 16px">权限分配</p>
                            <div class="col-md-offset-1" id="assignList"></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </section>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn_default"
            data-dismiss="modal"
            ng-click="createReset()"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
  <div
    class="modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    id="delete_modal"
  >
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">
            <span aria-hidden="true">&times;</span
            ><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">删除角色</h4>
        </div>
        <div class="modal-body">
          <div>确定删除以下角色?</div>
          <div class="deleteNames">{{deletenames}}</div>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn_blue"
            data-dismiss="modal"
            ng-click="deletes()"
          >
            删除
          </button>
          <button type="button" class="btn btn_default" data-dismiss="modal">
            取消
          </button>
        </div>
      </div>
    </div>
  </div>

  <div
    class="modal"
    tabindex="-1"
    role="dialog"
    aria-labelledby="myLargeModalLabel"
    id="update_modal"
    ng-show="updateShow"
  >
    <div class="modal-dialog" id="update_dlg" style="width: 800px">
      <div class="modal-content">
        <div class="modal-header">
          <button
            type="button"
            class="close"
            data-dismiss="modal"
            ng-click="updateReset()"
          >
            <span aria-hidden="true">&times;</span
            ><span class="sr-only">Close</span>
          </button>
          <h4 class="modal-title">更新角色</h4>
        </div>
        <div
          class="modal-body"
          style="height: 400px; overflow-y: auto; overflow-x: hidden"
        >
          <section id="widget-grid" widget-grid>
            <div class="row" style="height: 320px; padding: 8px">
              <article>
                <div
                  jarvis-widget
                  id="wid-id-2"
                  data-widget-editbutton="false"
                  data-widget-colorbutton="false"
                  data-widget-togglebutton="false"
                  data-widget-fullscreenbutton="false"
                  data-widget-deletebutton="false"
                >
                  <div style="border-color: #fff !important">
                    <div
                      class="widget-body fuelux"
                      data-smart-fuelux-wizard
                      data-smart-wizard-callback="wizard2CompleteCallback"
                      style="padding-bottom: 50px; border: none"
                    >
                      <div class="wizard">
                        <ul class="steps">
                          <li data-step="1" class="active" id="title_one">
                            <span class="badge badge-info">1</span>Step 1<span
                              class="chevron"
                            ></span>
                          </li>
                          <li data-step="2">
                            <span class="badge">2</span>Step 2<span
                              class="chevron"
                            ></span>
                          </li>
                          <li data-step="3">
                            <span class="badge">3</span>Step 3<span
                              class="chevron"
                            ></span>
                          </li>
                        </ul>
                        <div class="actions">
                          <button
                            type="button"
                            class="btn btn-sm btn_lightblue btn-prev"
                          >
                            <i class="fa fa-arrow-left"></i>上一步
                          </button>
                          <button
                            type="button"
                            class="btn btn-sm btn_lightblue btn-next"
                            ng-disabled="updateForm.updateRoleName.$invalid || UpdateFormDes"
                            ng-click="nextBtnUpdate()"
                            data-last="更新角色"
                          >
                            下一步<i class="fa fa-arrow-right"></i>
                          </button>
                        </div>
                      </div>
                      <div class="step-content">
                        <div class="step-pane active step_one" data-step="1">
                          <h3><strong>Step 1 </strong> - 基本信息</h3>
                          <form
                            class="form-horizontal"
                            role="form"
                            novalidate="novalidate"
                            data-smart-validate-form
                            name="updateForm"
                            id="updateForm"
                          >
                            <div
                              class="form-group"
                              ng-class="{'has-error':updateForm.updateRoleName.$invalid &&updateForm.updateRoleName.$touched}"
                            >
                              <label for="role" class="col-sm-3 control-label"
                                >角色名
                                <span class="required" aria-required="true"
                                  >*
                                </span>
                              </label>
                              <div class="col-sm-6">
                                <input
                                  type="text"
                                  class="form-control"
                                  id="updateRoleName"
                                  name="updateRoleName"
                                  required
                                  placeholder="角色名"
                                  ng-pattern="/^[a-zA-Z0-9_\u4e00-\u9fa5]{2,}$/"
                                  ng-minlength="2"
                                  ng-maxlength="64"
                                  ng-model="updateRoleName"
                                  onfocus="hideSth(this)"
                                  onblur="showSth(this)"
                                />
                                <p
                                  class="hoverTip hideTip"
                                  ng-show="!(updateForm.updateRoleName.$invalid&&!updateForm.updateRoleName.$error.maxlength&& !updateForm.updateRoleName.$pristine&&updateForm.updateRoleName.$touched)&&!(updateForm.updateRoleName.$error.maxlength&&updateForm.updateRoleName.$touched)"
                                >
                                  <i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",长度2-64
                                </p>
                                <span
                                  ng-if="updateForm.updateRoleName.$invalid&&!updateForm.updateRoleName.$error.maxlength&& !updateForm.updateRoleName.$pristine&&updateForm.updateRoleName.$touched "
                                  class="help-block"
                                  ><i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",长度2-64</span
                                >
                                <span
                                  ng-if="updateForm.updateRoleName.$error.maxlength&&updateForm.updateRoleName.$touched"
                                  class="help-block"
                                  ><i class="fa fa-exclamation-circle"></i>
                                  只能输入中英文、数字、"_",至多64位</span
                                >
                              </div>
                            </div>
                            <div class="form-group">
                              <label class="col-sm-3 control-label">描述</label>
                              <div class="col-sm-6">
                                <textarea
                                  type="textarea"
                                  class="form-control"
                                  placeholder="描述"
                                  id="updateDes"
                                  name="updateDes"
                                  ng-model="updateDes"
                                  style="resize: none; height: 100px"
                                ></textarea>
                                <p ng-if="!UpdateFormDes">
                                  <i class="fa fa-exclamation-circle"></i>
                                  输入长度最多250位字符
                                </p>
                                <p class="help-block" ng-if="UpdateFormDes">
                                  <i class="fa fa-exclamation-circle"></i>
                                  输入长度最多250位字符
                                </p>
                              </div>
                            </div>
                          </form>
                        </div>
                        <div
                          class="step-pane"
                          data-step="2"
                          id="lastStepUpdate"
                        >
                          <h3><strong>Step 2 </strong> - 权限分配</h3>
                          <form
                            class="smart-form"
                            role="form"
                            novalidate
                            id="update_step2"
                          ></form>
                        </div>
                        <div class="step-pane" data-step="3">
                          <h3><strong>Step 3 </strong> - 确认更新</h3>
                          <div class="col-md-offset-1">
                            <p style="font-size: 16px">基本信息</p>
                            <div
                              class="col-md-offset-1"
                              style="margin-bottom: 10px"
                            >
                              <div
                                class="col-md-12"
                                style="padding-left: 0px; font-size: 15px"
                                id="updateName"
                              ></div>
                              <div
                                class="col-md-12"
                                id="Des"
                                style="
                                  padding-left: 0px;
                                  font-size: 15px;
                                  margin: 10px 0px;
                                "
                              ></div>
                            </div>

                            <p style="font-size: 16px">权限分配</p>
                            <div
                              class="col-md-offset-1"
                              id="assignListUpdate"
                            ></div>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </article>
            </div>
          </section>
        </div>
        <div class="modal-footer">
          <button
            type="button"
            class="btn btn_default"
            data-dismiss="modal"
            ng-click="updateReset()"
          >
            取消
          </button>
        </div>
      </div>
    </div>
  </div>
</div>